<template>
  <div>
    <div class="checkBox" v-if="isShowCheck">
      <el-checkbox-group v-model="checkedList" @change="handleCheckedChange">
        <el-checkbox v-for="(option, index) in options" :label="option" :key="index">
          {{option.name}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="list" v-else>
      <div class="list-item" v-for="(option, index) in options" :key="index">
        {{option.name}}
        <div
          v-if="option.children.length==0"
          class="btn"
          @click="showDetail(option)"
          :style="{color: option.dataStatus?'#0D48CE':'#000', cursor: option.dataStatus?'pointer':'unset'}"
        >{{option.dataStatus?'不合格':'合格'}}</div>
        <div class="detail" v-show="option.dataStatus&&option.detailShow">
          <div class="tip">不合格原因</div>
          <CImgUploadNew editMode="detail" class="imgListUpload" :initList="option.img?option.img.split(',').filter(i=>i).map(i=>({fileUrl:i})):[]"
            actionUrl="" :uploadParas="{ type: 'image', fileNum: 4 }"
          >
          </CImgUploadNew>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CImgUploadNew from "@/components/Upload/CImgUploadNew";
export default {
  name: "checkList",
  props: {
    /* 选项列表数据(树形结构的对象数组) */
    options: {
      type: Array,
      default: () => {
        return [];
      }
    },
    checked: {
      type: Array,
      default: () => {
        return [];
      }
    },
    isShowCheck: {
      type: Boolean,
      default: true
    },
    level: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      checkedList: this.checked
    };
  },
  components: {
    CImgUploadNew
  },
  watch: {
    checked(){
      // console.log(this.checked)
      // this.checkedList = this.checked
    },
    options() {
      // this.$set( this.options, checked, false )
    }
  },
  mounted() {
  },
  methods: {
    handleCheckedChange(value) {
      console.log(value)
      this.checkedList=value
      var obj = []
      for (let i = 0; i < value.length; i++) {
        this.options.forEach(item => {
          if(item.id == value[i]){
            obj.push(item)
          }
        });
      }
      // console.log(obj)
      this.$emit('changeChecked', obj, this.level)
    },
    // 0正常，1已维护，2忽略/无此项，3需维修，4需大修
    showDetail(option) {
      if(!option.dataStatus) return false
      console.log(option)
      option.detailShow = !option.detailShow
    }
  },
};
</script>
<style lang="scss" scoped>
.btn{
  position: absolute;
  right: 0;
  top: 0;
  color: #000;
}
.list{
}
.list-title{
  height: 40px;
  line-height: 40px;
  background-color: #0D48CE;
  color: #fff;
  padding-left: 20px;
}
.list-item{
  line-height: 40px;
  padding-left: 20px;
  position: relative;
}
.detail{
  
}
.tip {
  font-size: 12px;
  color: rgba(0,0,0,.5);
  line-height: 20px;
  padding-left: 5px;
}
.imgListUpload{
  gap: 0 10px;
  // min-height: unset;
}
</style>
<style lang="scss">
// .checkboxBg.el-checkbox{
//   color: #fff;
// }
// .checkboxBg .el-checkbox__input.is-checked + .el-checkbox__label{
//   color: #fff;
// }
// .checkboxBg .el-checkbox__label{
//   line-height: 40px;
//   background-color: #0D48CE;
//   margin-left: 8px;
//   padding-left: 2px;
//   flex: 1 1 auto;
// }
// .checkBox .el-checkbox-button{
//   width: 100%;
//   background-color: transparent;
// }
</style>